irongit
Sign inRegister
huncholanehuncholane/dotbarPublic

Waybar configuration

dotbar/style/[WALLUST] ML4W-modern.css
381 lines7.4 KBCSS
RawDownloadHistory
1/* ---- 💫 https://github.com/JaKooLit 💫 ---- */
2/* ml4w-modern */
3
4@import '../../.config/waybar/wallust/colors-waybar.css';
5
6@define-color backgroundlight @color0;
7@define-color backgrounddark @color12;
8@define-color workspacesbackground1 @color0;
9@define-color workspacesbackground2 @color12;
10@define-color bordercolor @color13;
11@define-color textcolor1 @foreground;
12@define-color textcolor2 @foreground;
13@define-color textcolor3 @foreground;
14@define-color iconcolor @foreground;
15
16* {
17 font-family: "JetBrainsMono Nerd Font";
18 font-weight: bold;
19 min-height: 0;
20 /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
21 font-size: 97%;
22 /* note: different modules have different font sizes */
23 font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
24}
25
26window#waybar {
27 background-color: rgba(0,0,0,0.8);
28 border-bottom: 0px solid #ffffff;
29 /* color: #FFFFFF; */
30 background: transparent;
31 transition-property: background-color;
32 transition-duration: .5s;
33}
34
35#workspaces {
36 background: @workspacesbackground1;
37 margin: 2px 18px 3px 1px;
38 margin-left: 6px;
39 padding: 0px 2px;
40 border-radius: 5px 5px 5px 5px;
41 border: 0px;
42 font-style: normal;
43 color: @textcolor1;
44}
45
46#workspaces button {
47 padding: 0px 6px;
48 margin: 3px 2px;
49 border-radius: 3px 3px 3px 3px;
50 color: @textcolor1;
51 background-color: @workspacesbackground1;
52 transition: all 0.1s linear;
53}
54
55#workspaces button.active {
56 color: @textcolor1;
57 background: @workspacesbackground2;
58 border-radius: 3px 3px 3px 3px;
59 min-width: 30px;
60 transition: all 0.1s linear;
61}
62
63#workspaces button:hover {
64 color: @textcolor1;
65 background: @workspacesbackground2;
66 border-radius: 5px 5px 5px 5px;
67 opacity:0.7;
68}
69
70tooltip {
71 border-radius: 16px;
72 background-color: @backgroundlight;
73 opacity:0.9;
74 padding:20px;
75 margin:0px;
76}
77
78tooltip label {
79 color: @textcolor2;
80}
81
82#window {
83 margin: 3px 15px 3px 0px;
84 padding: 2px 10px 0px 10px;
85 border-radius: 5px 5px 5px 5px;
86 color:white;
87 font-weight:normal;
88}
89
90window#waybar.empty #window {
91 background-color:transparent;
92}
93
94#taskbar {
95 background: @backgroundlight;
96 margin: 3px 15px 3px 0px;
97 padding:0px;
98 border-radius: 5px 5px 5px 5px;
99 font-weight: normal;
100 font-style: normal;
101 border: 3px solid @backgroundlight;
102}
103
104#taskbar button {
105 margin:0;
106 border-radius: 5px 5px 5px 5px;
107 padding: 0px 5px 0px 5px;
108}
109
110#taskbar.empty {
111 background:transparent;
112 border:0;
113 padding:0;
114 margin:0;
115}
116
117.modules-left > widget:first-child > #workspaces {
118 margin-left: 0;
119}
120
121.modules-right > widget:last-child > #workspaces {
122 margin-right: 0;
123}
124
125#backlight,
126#backlight-slider,
127#battery,
128#bluetooth,
129#clock,
130#cpu,
131#disk,
132#idle_inhibitor,
133#keyboard-state,
134#memory,
135#mode,
136#mpris,
137#network,
138#power-profiles-daemon,
139#pulseaudio,
140#pulseaudio-slider,
141#taskbar button,
142#taskbar,
143#temperature,
144#tray,
145#window,
146#wireplumber,
147#workspaces,
148#custom-backlight,
149#custom-browser,
150#custom-cava_mviz,
151#custom-cycle_wall,
152#custom-dot_update,
153#custom-file_manager,
154#custom-keybinds,
155#custom-keyboard,
156#custom-light_dark,
157#custom-lock,
158#custom-hint,
159#custom-hypridle,
160#custom-menu,
161#custom-playerctl,
162#custom-power_vertical,
163#custom-power,
164#custom-quit,
165#custom-reboot,
166#custom-settings,
167#custom-spotify,
168#custom-swaync,
169#custom-tty,
170#custom-updater,
171#custom-weather,
172#custom-weather.clearNight,
173#custom-weather.cloudyFoggyDay,
174#custom-weather.cloudyFoggyNight,
175#custom-weather.default,
176#custom-weather.rainyDay,
177#custom-weather.rainyNight,
178#custom-weather.severe,
179#custom-weather.showyIcyDay,
180#custom-weather.snowyIcyNight,
181#custom-weather.sunnyDay {
182 margin-right: 8px;
183 margin-left: 6px;
184 font-size: 100%;
185 color: @iconcolor;
186}
187
188#custom-swaync {
189 margin-left: 12px;
190}
191
192#idle_inhibitor {
193 margin-right: 15px;
194 font-size: 102%;
195 font-weight: bold;
196 color: @iconcolor;
197}
198
199#idle_inhibitor.activated {
200 margin-right: 15px;
201 font-size: 100%;
202 font-weight: bold;
203 color: #dc2f2f;
204}
205
206#custom-menu {
207 background-color: @backgrounddark;
208 color: @textcolor1;
209 border-radius: 5px 5px 5px 5px;
210 padding: 0px 10px 0px 10px;
211 margin: 2px 17px 2px 0px;
212 border:3px solid @bordercolor;
213}
214
215#custom-power {
216 background-color: @backgrounddark;
217 color: @textcolor1;
218 border-radius: 5px 5px 5px 5px;
219 padding: 0px 0px 0px 6px;
220 border:3px solid @bordercolor;
221}
222
223#custom-keybinds {
224 margin: 0px 13px 0px 0px;
225 padding:0px;
226 color: @iconcolor;
227}
228
229#custom-updater {
230 background-color: @backgroundlight;
231 color: @textcolor2;
232 border-radius: 5px 5px 5px 5px;
233 padding: 2px 10px 0px 10px;
234 margin: 3px 15px 3px 0px;
235}
236
237#custom-updates.green {
238 background-color: @backgroundlight;
239}
240
241#custom-updates.yellow {
242 background-color: #ff9a3c;
243 color: #FFFFFF;
244}
245
246#custom-updates.red {
247 background-color: #dc2f2f;
248 color: #FFFFFF;
249}
250
251#keyboard-state {
252 margin-right:10px;
253}
254
255#clock {
256 background-color: @backgrounddark;
257 color: @textcolor1;
258 border-radius: 3px 5px 3px 5px;
259 padding: 1px 10px 0px 10px;
260 margin: 3px 0px 3px 0px;
261 border:3px solid @bordercolor;
262}
263
264#backlight {
265 background-color: @backgroundlight;
266 margin-left: 6px;
267 color: @textcolor2;
268 border-radius: 5px 5px 5px 5px;
269 padding: 2px 10px 0px 10px;
270 margin: 3px 15px 3px 0px;
271}
272
273#pulseaudio {
274 background-color: @backgroundlight;
275 color: @textcolor2;
276 border-radius: 5px 5px 5px 5px;
277 padding: 2px 10px 0px 10px;
278 margin: 3px 15px 3px 0px;
279}
280
281#pulseaudio.muted {
282 background-color: @backgrounddark;
283 color: @textcolor1;
284}
285
286#network {
287 background-color: @backgroundlight;
288 color: @textcolor2;
289 border-radius: 5px 5px 5px 5px;
290 padding: 2px 10px 0px 10px;
291 margin: 3px 15px 3px 0px;
292}
293
294#network.ethernet {
295 background-color: @backgroundlight;
296 color: @textcolor2;
297}
298
299#network.wifi {
300 background-color: @backgroundlight;
301 color: @textcolor2;
302}
303
304#bluetooth, #bluetooth.on, #bluetooth.connected {
305 background-color: @backgroundlight;
306 color: @textcolor2;
307 border-radius: 5px 5px 5px 5px;
308 padding: 2px 10px 0px 10px;
309 margin: 3px 15px 3px 0px;
310}
311
312#bluetooth.off {
313 background-color: transparent;
314 padding: 0px;
315 margin: 0px;
316}
317
318#battery {
319 background-color: @backgroundlight;
320 color: @textcolor2;
321 border-radius: 5px 5px 5px 5px;
322 padding: 2px 15px 0px 10px;
323 margin: 3px 15px 3px 0px;
324}
325
326#battery.charging, #battery.plugged {
327 color: @textcolor2;
328 background-color: @backgroundlight;
329}
330
331@keyframes blink {
332 to {
333 background-color: @backgroundlight;
334 color: @textcolor2;
335 }
336}
337
338#battery.critical:not(.charging) {
339 background-color: #f53c3c;
340 color: @textcolor3;
341 animation-name: blink;
342 animation-duration: 3.0s;
343 animation-timing-function: steps(12);
344 animation-iteration-count: infinite;
345 animation-direction: alternate;
346}
347
348#tray {
349 padding: 0px 15px 0px 0px;
350}
351
352#tray > .passive {
353 -gtk-icon-effect: dim;
354}
355
356#tray > .needs-attention {
357 -gtk-icon-effect: highlight;
358}
359
360#backlight-slider slider,
361#pulseaudio-slider slider {
362 min-width: 0px;
363 min-height: 0px;
364 opacity: 0;
365 background-image: none;
366 border: none;
367 box-shadow: none;
368}
369
370#backlight-slider trough,
371#pulseaudio-slider trough {
372 min-width: 80px;
373 min-height: 5px;
374 border-radius: 5px;
375}
376
377#backlight-slider highlight,
378#pulseaudio-slider highlight {
379 min-height: 10px;
380 border-radius: 5px;
381}